<template lang="html">
    <div
      class="x-bar"
      :id="chartId"
      :option='option'
      >
      </div>
</template>

<script>
import {formatNum} from '../../../util/tool'
export default {
  props : {
    chartId : {
      type : String,
    },
    title : {
      type : String,
    },
    options : {
      type : Object,
    }
  },
  data(){
    return {
      chart : '',
      option: {
        grid: {
          left: '10%',
          right: '14%',
          top : '20%',
          bottom: '0%',
          containLabel: true
        },
        tooltip : {
          show : true,
          trigger: 'axis',
          showContent : false
        },
        xAxis: {
          type: 'category',
          name: '月份',
          data: ['1', '2', '3', '4', '5', '6', '7','8','9','10','11','12'],
          boundaryGap : false,
          nameTextStyle: {
            color: '#fff',
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#fff',
              fontSize : '12'
            },
          },
          axisLine : {
            show : true,
            lineStyle : {
                color : '#0678c6'
            },
          },
          axisTick : {
            show:false,
          }
        },
        yAxis: {
          type: 'value',
          name: '人数',
          nameTextStyle : {
            color : '#fff',
            fontSize : 10,
            padding : [0,0,-4,-32]
          },
          axisLine : {
            show : true,
            lineStyle : {
                color : '#0678c6'
            },
          },
          axisLabel: {
            show: false,
            textStyle: {
                color: '#fff',
                fontSize : '12'
            },
          },
          axisTick : {
            show:false,
            alignWithLabel: true
          },
          splitLine : {
            show : false,
          }
        },
        series: [{
          data: [50, 20, 20, 35, 40, 30, 40, 66, 30,27,20,60],
          type: 'line',
          smooth: true,
          lineStyle: {
            normal: {
              color: '#00feff',
              width: 2,
              type: 'solid'
            }
          },
          itemStyle: {
            normal: {
              color: '#fff',
              borderWidth: 2,
              borderColor: '#00feff'
            }
          },
          label : {
            normal: {
              show : true,
              color : '#fff',
            }
          },
          emphasis : {
            itemStyle : {
              color: '#ffa729',
              borderColor: '#ffa729'
            },
            label : {
              show : true,
              color : '#fff600'
            },
          },
          areaStyle: {normal: {
              color: new this.$echarts.graphic.LinearGradient(0, 0.3, 0, 1, [{
                  offset: 0,
                  color: 'rgb(73, 217, 254)'
              }, {
                  offset: 1,
                  color: 'rgba(73, 217, 254,.0)'
              }])
          }},
        }]
      }
    }
  },
  watch : {
  },
  methods : {
    init() {
     this.chart = this.$echarts.init(document.getElementById(this.chartId));
     this.chart.setOption(this.option);
     window.addEventListener("resize", this.chart.resize);
    }
  },
  mounted(){
    this.init();
  }
}
</script>

<style lang="scss" scoped>
  .x-bar {
    width: 100%;
    height: 175 / 260 * 100%;
  }
</style>
